<template>
	<view class="">
		<view class="details-bg">
			<view class="details-avatar-wrap">
				<view class="">
					<image class="details-avatar" :src="userData.avatar" mode=""></image>
				</view>

				<view class="details-info-topright">
					<view class="details-info-nickname-flex">
						<view class="details-info-nickname">{{userData.nickname}}</view>
						<view class="details-info-follow followed" v-if="userData.isCollect"  @click="gz(0)">已关注</view>
						<view class="details-info-follow" v-else  @click="gz(1)">关注</view>
					</view>
					<view class="details-level-wrap">
						<view class="details-level" v-if="userData.grade==1">
							<view class="ico-img">
								<image src="../../static/ico/grade1.png" mode=""></image>
							</view>
							<text class="details-level-title">普通</text>
						</view>
						<view class="details-level" v-else-if="userData.grade==2">
							<view class="ico-img">
								<image src="../../static/ico/grade2.png" mode=""></image>
							</view>
							<text class="details-level-title">金牌</text>
						</view>
						<view class="details-level" v-else-if="userData.grade==3">
							<view class="ico-img">
								<image src="../../static/ico/grade3.png" mode=""></image>
							</view>
							<text class="details-level-title">镇店</text>
						</view>
						<view class="details-level" v-else-if="userData.grade==4">
							<view class="ico-img">
								<image src="../../static/ico/grade4.png" mode=""></image>
							</view>
							<text class="details-level-title">神级</text>
						</view>
						<view class="details-level" v-else-if="userData.grade==5">
							<view class="ico-img">
								<image src="../../static/ico/grade5.png" mode=""></image>
							</view>
							<text class="details-level-title">首席</text>
						</view>
						<view class="order-receiving">在线接单中</view>
					</view>
					<view class="details-service-items">
						<view class="details-service">服务项目</view>
						<view class="service-category">
							<text>{{serviceTags(userData.serviceTags)}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="outer2 u-flex">
				<view class="audio">
					<view class="shAudio">
						<view class="wavebox sex2">
							<view class="audio-ico ">
								<image src="/static/details/radio.png"></image>
							</view>
							<!---->
							<view class="first wave"></view>
							<view class="second wave"></view>
							<view class="third wave"></view>
							<view class="first wave"></view>
							<view class="second wave"></view>
							<view class="third wave"></view>
						</view>
					</view>
				</view>
				<view class="tags ">
					<view class="tag" v-for="item in userData.voiceTags" :key="item">{{item}}</view>
				</view>
			</view>
			<view class="intro flex">
				<view class="signature-img">
					<image src="/static/details/Signature.png" show-menu-by-longpress="true">
					</image>
				</view>
				<view class="signature">{{userData.intro}}</view>
			</view>
			<view class="tags custom-tag">
				<view class="tag" v-for="item in userData.customTags" :key="item">{{item}}</view>
			</view>
			<view class="images u-flex">
				<view v-for="(item,index) in userData.imageUrl" :key="index" @click="previewImage(index)">
					<view class="u-image show-img">
						<image show-menu-by-longpress="true" class="u-image__image" style="border-radius: 10rpx;"
							:src="item">
						</image>
					</view>
				</view>
			</view>
			<view style="height: 84rpx;"></view>
		</view>


		<view class="employee-info">
			<view class="tabs">
				<view class="u-tabs">
					<view>
						<scroll-view class="u-scroll-view">
							<div class="uni-scroll-view">
								<div class="uni-scroll-view">
									<div class="uni-scroll-view-content">
										<!---->
										<view class="u-scroll-box u-tabs-scorll-flex">
											<view class="u-tab-item  u-tab-item-active">
												<!---->价格表
											</view>
											
											<!-- <view class="u-tab-bar subscript"></view> -->
										</view>
									</div>
								</div>
							</div>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="main ">
				<!-- 服务项目 -->
				<view class="sku-panel">
					<view class="u-row u-flex-items border-top border-left border-right radius-top table-header">
						<view class="form-site" style="flex: 0 0 83.3333%;">
							<view class="u-text-center cell">服务项目</view>
						</view>
						<view class=" border-left form-site" style="flex: 0 0 16.6667%;">
							<view class="u-text-center cell">价格</view>
						</view>
					</view>
					<view class="u-row u-flex-items border-top border-left border-right " :class="userData.skuList.length==index+1?'radius-bottom':''" v-for="(item,index) in userData.skuList" :index="index">
						<!---->
						<view class="form-site " style="flex: 0 0 33.3333%;">
							<view class="u-text-center ql-align-center cell">{{item.name}}</view>
						</view>
						<view class="form-site" style="flex: 0 0 66.6667%;">
							<view class="u-text-center ql-align-center">
								<view class="u-row u-flex-items border-left border-bottom " v-for="(item2,index2) in item.children" :index="index2">
									<view class="form-site" style="flex: 0 0 75%;">
										<view class="u-text-center ql-align-center cell">{{item2.name}}
										</view>
									</view>
									<view class=" border-left form-site" style="flex: 0 0 25%;">
										<view class="u-text-center cell">{{item2.price}}</view>
									</view>
									<!---->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="price-intro">
					<view class="title">注：</view>
					<view class="">
						<view class="content">
							1.包天、包周、包月每日时长不低于5小时
						</view>
						<view class="content">
							2.下单不退不换，介意慎拍！
						</view>
						<view class="content">
							3.投诉反馈联系店长微信：yydsmoing
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 84rpx;"></view>

		<view class="bottom-wrap">
			<view class="bottom u-flex">
				<view class="btn" @click="sell">立即下单</view>
				<view class="btn" @click="reward">打赏</view>
			</view>
			<!-- 弹窗  立即下单-->
			<view class="share">
				<view :class="{'box': share}"></view>
				<view class="share-item" :class="{'show': share}">
					<view class="share-con">
						<view class="sell">
							<text>服务类型</text>
						</view>
						<view class="shares" @click.stop="display">
							×
						</view>
					</view>
					<view class="service">
						<view class="service-content service-content-bg" v-for="(item,index) in severList" :key="index" @click="nav(index)"
							:class="one ==index?'active':''">
							<text class="text" :class="one ==index?'actives':''">{{item.name}}</text>
						</view>
						<!-- <view class="service-content service-content-bg">
							<text>文字.语音条</text>
						</view>
						<view class="service-content service-content-bg">
							<text>语音通话</text>
						</view>
						<view class="service-content service-content-bg">
							<text>云顶之羿</text>
						</view>
						<view class="service-content service-content-bg">
							<text>虚拟恋人</text>
						</view>
						<view class="service-content service-content-bg">
							<text>联盟娱乐陪</text>
						</view>
						<view class="service-content service-content-bg">
							<text>联盟技术陪</text>
						</view>
						<view class="service-content service-content-bg">
							<text>绝地求生娱乐陪</text>
						</view> -->
					</view>
					<view class="option">选项</view>
					<view class="service">
						<view class="service-content service-content-bg" v-for="(item,index) in severChildrenList" :key="index" @click="navs(index,item.skuId)"
							:class="two ==index?'active':''">
							<text class="text" :class="two ==index?'actives':''">{{item.name}}</text>
						</view>
						<!-- <view class="service-content service-content-bg">
							<text>文语半小时</text>
						</view>
						<view class="service-content service-content-bg">
							<text>文语一小时</text>
						</view>
						<view class="service-content service-content-bg">
							<text>文语包天</text>
						</view> -->
					</view>
					<view class="input-content">
						<view class="WeChat">微信号</view>
						<input type="text" v-model="wechat" placeholder="请输入内容">
					</view>
					<view class="input-content">
						<view class="remarks">备注</view>
						<textarea class="remarks-input" v-model="remark" value="" placeholder="请输入内容" auto-height />
					</view>
					<view class="purchase">
						<view class="purchase-number">购买数量</view>
						<view class="">
							<text class="number" @click="lose">-</text>
							<text class="number">{{sum}}</text>
							<text class="number" @click="add">+</text>
						</view>
					</view>
					<!-- 支付方式 -->
					<view>
						<radio-group @change="radioChange">
							<label class="pay-list-cell " v-for="(item, index) in items">
								<view>
									<radio :checked="index === current" />
								</view>
								<view class="pay">
									<view class="pay-ico" v-if="index == 1 ">
										<image src="../../static/logo.png" mode=""></image>
									</view>
									{{item.name}}
								</view>
							</label>
						</radio-group>
					</view>
					<view class="total-price-flex">
						<view class="total-price">总价：<text>-</text>恋豆</view>
						<view class="buy-now" @click="payOrder">
							<text>立即下单</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 弹窗  打赏-->
			<view class="elastic">
				<view :class="{'box': elastic}" @click="elastic"></view>
				<view class="share-item" :class="{'show': elastic}">
					<view class="share-con">
						<view class="sell">
							<text>服务类型</text>
						</view>
						<view class="shares" @click.stop="hide">
							×
						</view>
					</view>
					<view class="service">
						<view class="service-content reward-content-bg">
							<text>打赏</text>
						</view>
					</view>
					<view class="input-content">
						<view class="money">打赏金额</view>
						<input v-model="money" type="number"  placeholder="请输入内容">
					</view>
					<view class="input-content">
						<view class="stay">留言</view>
						<textarea v-model="content" class="stay-input" value="" placeholder="请输入内容" auto-height />
					</view>
					<view class="input-content">
						<view class="WeChat">微信号</view>
						<input v-model="wx" type="text" placeholder="请输入内容">
					</view>
					<!-- 支付方式 -->
					<view>
						<radio-group @change="radioChange">
							<label class="pay-list-cell" v-for="(item, index) in items">
								<view>
									<radio :value="item.value" :checked="index === current" />
								</view>
								<view class="pay">
									<view class="pay-ico" v-if="index == 1 ">
										<image src="../../static/logo.png" mode="">
										</image>
									</view>
									{{item.name}}
								</view>
							</label>
						</radio-group>
					</view>
					<view class="buy-now reward-now" @click="dsBtn()">
						<text>立即打赏</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				share: false,
				elastic: false,
				items: [{
						name: '余额支付（余额0）',
						value:'1'
					},
					{
						name: '微信支付',
						value:'2'
					},


				],
				images: [
					'../../static/logo.png',
					'../../static/logo.png'
				],
				current: 0,
				// 下单
				id:'',
				userData:{},
				one:-1,
				two: -1,
				skuId:'',
				severList:[],
				severChildrenList:[],
				wechat:'',
				remark:'',
				sum:1,
				payMode:1,
				// 打赏
				content:'',
				wx:'',
				money:'',
				// paytype:1
				
				
			}
		},
		onShow() {
			console.log(this.$route.query.id)
			this.id=this.$route.query.id
			this.getdetail(this.$route.query.id)
		},
		methods: {
			
			getdetail(id){
				this.$http.getReq("/api/order/getcontent",{id:id}).then(res => {
					this.userData = res.data;
				});
			},
			serviceTags(e){
				return e.join("|")
			},
			gz(f){
				this.$http.postReq("/api/user/addAtt", {
					employeeId:this.id,
					act: f
				}).then(res => {
					if(res.code==200){
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
						this.getdetail(this.id)
					}
				});
			},
			sell() {
				this.share = true;
				this.$http.random("/api/order/random", ).then(res => {
					this.severList = res.data
					this.severChildrenList = res.data[0].children
				});
			},
			nav(i) {
				this.one = i
				this.severChildrenList = this.severList[i].children
			},
			navs(i,f) {
				console.log(i,f,"112")
				this.two = i
				this.skuId = f
			},
			add(){
				this.sum++
			},
			lose(){
				if(this.sum<=1){
					uni.showToast({
						title: "数量不能小于1",
						icon: "none"
					})
				}else{
					this.sum--
				}
			},
			radioChange(e){
				this.payMode = e.detail.value
			},
			payOrder(){
				var that = this
				if (!this.skuId) {
					uni.showToast({
						title: "请选择服务类型",
						icon: "none"
					})
					return false
				} else if(!this.wechat) {
					uni.showToast({
						title: "请输入微信",
						icon: "none"
					})
					return false
				} 	
				this.$http.postReq("/api/user/createOrder",{
					wechat:this.wechat,
					skuId:this.skuId,
					num:this.sum,
					orderType:'1',
					payMode:this.payMode,
					remark:this.remark,
					employeeId:this.id
					}).then(res => {
						if(res.code=="200"){
							uni.showToast({
								title:res.msg,
								icon:"success"
							})
							that.share = false;
						}else{
							uni.showToast({
								title:res.msg,
								icon:"none"
							})
						}
				});
			},
			// 打赏
			dsBtn(){
				if (!this.money) {
					if(this.money<0){
						uni.showToast({
							title: "请输入正确金额",
							icon: "none"
						})
						return false
					}
				} else if(!this.wx) {
					uni.showToast({
						title: "请输入微信",
						icon: "none"
					})
					return false
				} 	
				this.$http.postReq("/api/order/priceExplain",{
					wx:this.wx,
					money:this.money,
					paytype:this.payMode,
					content:this.content,
					to_uid:this.id
					}).then(res => {
						if(res.code=="200"){
							uni.showToast({
								title:res.msg,
								icon:"success"
							})
							that.share = false;
						}else{
							uni.showToast({
								title:res.msg,
								icon:"none"
							})
						}
				});
			},
			// 隐藏分享
			display() {
				this.share = false;
			},
			reward() {
				this.elastic = true;
			},
			// 隐藏分享
			hide() {
				this.elastic = false;
			},
			previewImage(index) {
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.userData.imageUrl //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
		}
	}
</script>

<style>
	uni-textarea {
		width: 400rpx;
	}

	.details-bg {
		background-image: url(../../static/details/details_bg.png);
		background-size: 100% 100%;
		position: relative;
		z-index: 1;
		padding: 32rpx 50rpx;
	}

	.details-avatar-wrap {
		display: flex;

	}

	.details-avatar {
		width: 146rpx;
		height: 146rpx;
		border-radius: 50%;
		margin-right: 21rpx;
	}

	.details-info-topright {
		width: 100%;
	}

	.details-info-nickname-flex {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.details-info-nickname {
		font-size: 35rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.details-info-follow {
		background: #F8526A;
		border-radius: 25rpx;
		font-size: 24rpx;
		color: #ffffff;
		padding: 2rpx 30rpx;
		line-height: 44rpx;
	}
	.followed {
		background-color: #ACACAC;
	}
	.details-level-wrap {
		display: flex;
		margin-bottom: 20rpx;
	}

	.details-level {
		display: flex;
		align-items: center;
		border-radius: 25rpx;
		background: #DE848C;
		margin-right: 20rpx;
	}

	.ico-img {
		width: 42rpx;
		height: 42rpx;
		margin-right: 4rpx;
	}

	.ico-img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.details-level-title {
		margin-right: 20rpx;
		color: #ffffff;
		font-size: 25rpx;
	}

	.order-receiving {
		color: #ffffff;
		font-size: 34rpx;
		letter-spacing: 5rpx;
	}

	.details-service-items {
		display: flex;
		margin-bottom: 20rpx;
	}

	.details-service {
		color: #ffffff;
		background: #FF9194;
		font-size: 20rpx;
		padding: 4rpx 20rpx;
		border-radius: 25rpx;
		line-height: 42rpx;
	}

	.service-category {
		background-color: #F5E6E8;
		padding-right: 17rpx;
		padding-left: 40rpx;
		margin-left: -30rpx;
		border-top-right-radius: 188rpx;
		border-bottom-right-radius: 188rpx;
		position: relative;
		z-index: -1;
	}

	.service-category text {
		font-size: 20rpx;
		color: #F7726A;
		line-height: 42rpx;
	}

	/*  */

	.outer2 {
		padding: 20rpx;
	}

	.sex2.wavebox {
		background-color: #e87578;
		width: 200rpx;
		height: 62rpx;
	}

	.wavebox {
		z-index: 999;
		margin-left: 20rpx;
		overflow: hidden;
		margin: 20rpx 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 12rpx 32rpx;
		border-radius: 170rpx;
	}

	.audio-ico {
		width: 38rpx;
		height: 38rpx;
	}

	.audio-ico image {
		width: 38rpx;
		height: 38rpx;
	}

	.wavebox .first {
		height: 20rpx;		
	}

	.wavebox .second {
		height: 40rpx;		
	}

	.wavebox .third {
		height: 20rpx;		
	}

	.sex2 .wave {
		background-color: #fecdce;
	}

	.wave {
		width: 10rpx;
		height: 100%;
		margin-left: 10rpx;
		border-radius: 94rpx;
		vertical-align: middle;
		display: inline-block;
	}
	
	/*  */
	.intro {
		display: flex;
		padding: 10rpx 14rpx;
		background-color: #a6afb5;
		font-size: 22rpx;
		border-radius: 10rpx;
		float: left;
		margin: 10rpx;
	}

	.signature-img {
		width: 36rpx;
		height: 36rpx;
		border-radius: 0rpx;
		overflow: visible;
		opacity: 1;
		transition: opacity 0.5s ease-in-out 0s;
		background-color: transparent;
	}

	.signature-img image {
		border-radius: 0rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.signature {
		margin-left: 10rpx;
		color: #ffffff;
		font-size: 20rpx;
	}

	.u-image__image {
		width: 100%;
		height: 100%;
	}

	.custom-tag {
		width: 600rpx;
		min-height: 100rpx;
		margin-bottom: 40rpx;
	}

	.tags {
		margin: 10rpx;
	}

	.tags .tag {
		padding: 4rpx 14rpx;
		background-color: #a6afb5;
		font-size: 22rpx;
		border-radius: 170rpx;
		float: left;
		margin: 10rpx;
		color: #ffffff;
	}

	.u-flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.images {
		width: 100%;
		overflow-x: scroll;
	}

	.images::-webkit-scrollbar {
		display: none;
	}

	.images .u-image {
		margin: 10rpx;
	}

	.show-img {
		width: 142rpx;
		height: 142rpx;
		border-radius: 10rpx;
		overflow: visible;
		opacity: 1;
		transition: opacity 0.5s ease-in-out 0s;
		background-color: transparent;
	}

	/* 表格 */
	.employee-info {
		/* width: 100vw; */
		margin-top: -80rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		position: relative;
		z-index: 1;
	}

	.employee-info .tabs {
		width: 600rpx;
		margin: 0 auto;
	}

	uni-view {
		display: block;
		box-sizing: border-box;
	}

	.u-scroll-view {
		width: 100%;
		white-space: nowrap;
		position: relative;
	}

	.uni-scroll-view,
	.uni-scroll-view-content {
		width: 100%;
		height: 100%;
	}

	.u-tabs-scorll-flex {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.u-tab-item {
		position: relative;
		display: inline-block;
		text-align: center;
		transition-property: background-color, color;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 34rpx;
		transition-duration: 0.5s;
		flex: 1 1 0%;
		width: auto;
		color: rgb(38, 38, 38);
	}

	.u-tab-item-active {
		font-weight: bold;
	}

	.u-tab-bar {
		position: absolute;
		bottom: 0;
	}

	.subscript {
		width: 40rpx;
		transform: translate(42.8359px, -100%);
		transition-duration: 0.5s;
		background: linear-gradient(126deg, rgb(255, 0, 178) 0%, rgb(128, 0, 188) 100%);
		height: 6rpx;
		opacity: 1;
		border-radius: 6rpx;
	}

	.employee-info .main .sku-panel {
		padding: 32rpx;
	}

	.u-flex-items {
		align-items: center;
		justify-content: flex-start;
	}

	.employee-info .main .radius-top {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.employee-info .main .table-header {
		background: linear-gradient(108deg, #d1dfe8 80%, #f8f0f1);
	}

	.employee-info .main .border-right {
		border-right: 1rpx solid #424242;
	}

	.employee-info .main .border-top {
		border-top: 1rpx solid #424242;
	}

	.u-row {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.form-site {
		padding: 0rpx;
		margin-left: 0%;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
	}

	.employee-info .main .cell {
		height: 60rpx;
		line-height: 60rpx;
	}

	.u-text-center {
		text-align: center;
	}

	.employee-info .main .border-left {
		border-left: 1rpx solid #424242;
	}

	.employee-info .main .border-bottom {
		border-bottom: 1rpx solid #424242;
	}

	.employee-info .main .radius-bottom {
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}

	.employee-info .main .price-intro {
		width: 686rpx;
		margin:10rpx auto;
		display: flex;
		padding-bottom: 50rpx;
	}

	.employee-info .main .price-intro .title {
		width: 140rpx;
		text-align: right;
	}

	.employee-info .main .price-intro .content {
		white-space: pre-wrap;
		font-size: 28rpx;
	}

	.bottom-wrap {
		position: relative;
		z-index: 1;
	}

	.bottom {
		width: 100%;
		height: 90rpx;
		background-color: #e8eff4;
		position: fixed;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		z-index: -1;
	}

	.bottom .btn {
		width: 50%;
		height: 100%;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 700;
	}

	.bottom .btn:first-child {
		background-color: #b2cad9;
		color: #fff;
	}

	/* 弹窗 开始  立即下单 */
	.share,
	.elastic {
		width: 100%;
		height: 100%;
		background: #000000;
		position: relative;
		z-index: 1;
	}

	.box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
	}

	/* 进入分享动画 */
	.show {
		transition: all 0.3s ease;
		transform: translateY(0%) !important;
	}

	/* 离开分享动画 */
	.share-item {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		padding: 40rpx;
		background-color: #fff;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 1999;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		/* overflow-y: scroll; */
	}

	.share-con {
		/* width: 90%; */
		height: 100rpx;
		display: flex;
		margin: auto;
		align-items: center;
		justify-content: space-between;
	}

	.share-con .sell text,
	.share-con .elastic text {
		font-size: 34rpx;
		font-weight: 700;
		color: #444C53;
	}

	.share-con .shares {
		font-size: 60rpx;
		color: #909399;
	}

	.option {
		font-size: 34rpx;
		font-weight: 700;
		margin-bottom: 30rpx;
		color: #444C53;
	}

	.service {
		display: flex;
		flex-wrap: wrap;
	}

	.service-content {
		border-radius: 25rpx;
		min-height: 60rpx;
		margin-bottom: 30rpx;
		margin-right: 20rpx;

	}

	.service-content-bg {
		background-color: #A6AFB5;
	}

	.reward-content-bg {
		background-color: #5C6164
	}

	.service-content text {
		color: #ffffff;
		margin: 20rpx;
		line-height: 60rpx;
		font-size: 30rpx;
	}
	.text {
		color: #838383;
		margin: 20rpx;
		line-height: 60rpx;
		font-size: 32rpx;
	}
	
	.active {
		background-color: #1777ff;
	}
	
	.actives {
	
		color: #FFF;
	}

	.input-content {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		border-bottom: 1px solid #F6F7F9;
		padding-bottom: 24rpx;
	}

	.WeChat,
	.remarks,
	.money,
	.stay {
		font-size: 32rpx;
		margin-right: 30rpx;
		width: 30%;
		text-align: center;
	}

	.remarks-input,
	.stay-input {
		min-height: 76rpx;
	}

	/* 购买数量 */
	.purchase {
		display: flex;
		justify-content: space-between;
		margin-bottom: 50rpx;
	}

	.purchase-number {
		font-size: 32rpx;
		color: #000;
	}

	.number {
		background: #F2F3F5;
		margin: 10rpx;
		padding: 6rpx 20rpx;
		font-size: 30rpx;
		color: #323233;
	}

	/* 支付 */
	.pay-list-cell {
		display: flex;
		margin-bottom: 30rpx;
	}

	.pay {
		display: flex;
		align-items: center;
		color: #727377;
		font-size: 35rpx;
	}

	.pay-ico {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.pay-ico image {
		width: 100%;
		height: 100%;
	}

	/* 总价 */
	.total-price-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.total-price {
		font-size: 32rpx;
	}

	.buy-now {
		background: #B2CAD9;
		border-radius: 50rpx;
		padding: 18rpx 100rpx;
	}
	

	.buy-now text {
		color: #ffffff;
		font-size: 34rpx;
	}

	.reward-now {
		width: 50%;
		float: right;
	}

	/* 弹窗结束 */
</style>
